import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
import Title from '../Account_management/component/xitong_Title'
import Flushed from '../../Monitoring_analytics/Operate_monitor/Component/Flushed'


import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';

import { getcos, delcos } from '../../../request/api'

export default function Account_management() {
  const navigate = useNavigate()
  useEffect(() => {
    getcosdata()
  }, [])

  // 角色获取
  const [cosdata, setcosdata] = useState([])
  const getcosdata = async () => {
    const res = await getcos({})
    setcosdata(res.data)
  }

  // 获取子组件传递的搜索完后的数据信息，更新用户信息
  const getuserlist = (item: any) => {
    setcosdata(item)
  }

  // 删除用户信息
  const cosdelete = async () => {
    if (selectedRowKeys.length == 0) {
      alert('请选择要删除的用户')
    } else {
      let data = await delcos({ list_id: selectedRowKeys })
      if (data.code == 200) {
        alert('删除成功')
        setSelectedRowKeys([])
        getcosdata()
      }
    }
  }










  type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
  const columns: TableColumnsType = [
    { title: 'ID', dataIndex: 'key' },
    { title: '角色', dataIndex: 'identity_name' },
    { title: '角色说明', dataIndex: 'identity_describe' },
    { title: '创建日期', dataIndex: 'static_time' },
    {
      title: '操作',
      key: '_id',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            if(selectedRowKeys.length==1){
              navigate(`/home/system/Updatacos?_id=${selectedRowKeys}`)
            }else if(selectedRowKeys.length>1){
              alert('请选择一个用户进行编辑')
            }else{
              alert('请选择要编辑的用户')
            }

          }}>编辑 </a>
          <a onClick={() => {
            cosdelete()
          }}>删除</a>
        </Space>
      ),
    },
  ];




  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState(false);

  const start = () => {
    setLoading(true);
    let time = setTimeout(async () => {
      let data = await delcos({ list_id: selectedRowKeys })
      console.log(data);

      if (data.code == 200) {
        alert('删除成功')
        setSelectedRowKeys([]);
        setLoading(false);

        clearTimeout(time)
      }
      getcosdata()

    }, 1000);
  };


  // 数据渲染
  const dataSource = cosdata.map((item) => ({
    key: item._id,
    identity_name: item.identity_name,
    identity_describe: item.identity_describe,
    static_time: item.static_time,
  }));


  // 选择项
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;




  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };




  return (
    <div>
      <Title name='新增角色' fct={getuserlist} />
      <Flushed></Flushed>
      <div style={{ width: '100%', backgroundColor: 'white', padding: '0.5rem', marginTop: '0.5rem' }}>
        <Flex gap="middle" vertical>
          <Flex align="center" gap="middle">
            <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
              批量删除
            </Button>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : null}
          </Flex>
          <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
        </Flex>
      </div>

    </div>
  )
}
